<template>
  <form action="" class="loginbar" @submit.prevent="handleSubmit">
        <div class="item">
            <div class="input">
                <label>邮箱：<input type="text" v-model="userInfo.mail" @input="validEmpty('mail','不能为空')"></label>
                <button type="button" class="emitcode" @click="emitcode()">{{emitvalue}}</button>
            </div>
            <div class="error" :style="{visibility:error.mail?'visible':'hidden'}">{{error.mail}}</div>
        </div>
        <div class="item">
            <div class="input"><label>密码：<input type="password" v-model="userInfo.pwd" @input="validEmpty('pwd','不能为空')"></label></div>
            <div class="error" :style="{visibility:error.pwd?'visible':'hidden'}">{{error.pwd}}</div>
        </div>
        <div class="item">
            <div class="input"><label>重复密码：<input type="password" v-model="userInfo.pwdAgain" @input="validEmpty('pwdAgain','不能为空');verifypwd()"></label></div>
            <div class="error" :style="{visibility:error.pwdAgain?'visible':'hidden'}">{{error.pwdAgain}}</div>
        </div>
        <div class="item">
            <div class="input"><label>昵称：<input type="text" v-model="userInfo.nickname" @input="validEmpty('nickname','不能为空')"></label></div>
            <div class="error" :style="{visibility:error.nickname?'visible':'hidden'}">{{error.nickname}}</div>
        </div>
        <div class="item">
            <div class="input"><label>验证码：<input type="text" v-model="userInfo.verifyCode" @input="validEmpty('verifyCode','不能为空')"></label></div>
            <div class="error" :style="{visibility:error.verifyCode?'visible':'hidden'}">{{error.verifyCode}}</div>
        </div>
        <div class="item">
            <input type="submit" value="注册">
            <div class="error" :style="{visibility:error.server?'visible':'hidden'}">{{error.server}}</div>
        </div>
    </form>
</template>

<script>
import {reg, login,sendcode} from "../services/userService"
export default {
    data(){
        return {
            userInfo:{
                mail:"",
                pwd:"",
                pwdAgain:"",
                nickname:"",
                verifyCode:"",
            },
            error:{
                mail:"",
                pwd:"",
                pwdAgain:"",
                nickname:"",
                verifyCode:"",
                server:""
            },
            emitvalue:"发送"
        }
    },
    methods:{
        validEmpty(field,msg){
            if(this.userInfo[field]){
                this.error[field] = ""
                return true
            }else{
                this.error[field] = msg
                return false
            }
        },
        verifypwd(){
            var result = this.validEmpty("pwdAgain","密码不能为空")
            if(result){
                if(this.userInfo.pwd !== this.userInfo.pwdAgain){
                    this.error.pwdAgain = "两次密码不一致"
                    return false
                }
                return true
            }
            return false
        },
        handleSubmit(){
            var validata1 = this.validEmpty("mail","不能为空")
            var validata2 = this.validEmpty("pwd","不能为空")
            var validata3 = this.verifypwd()
            var validata4 = this.validEmpty("nickname","不能为空")
            var validata5 = this.validEmpty("verifyCode","不能为空")
            if(validata1 && validata2 && validata3 && validata4 && validata5){
                reg(this.userInfo).then(resp=>{
                    if(resp.err == 0){
                        alert("注册成功")
                        this.$router.push({
                            name:"Login"
                        })
                    }else{
                        this.error.server = resp.msg
                    }
                })
            }
        },
        emitcode(){
            if(this.emitvalue == "发送"){
                this.emitvalue = 60
                let timer = setInterval(()=>{
                    if(this.emitvalue-- == 0){
                        this.emitvalue = "发送"
                        clearInterval(timer)
                    }
                },1000)
                //发送验证码
                sendcode(this.userInfo.mail).then(resp=>{
                    if(resp.err){
                        this.error.mail = resp.msg
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
    form{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 50px;
    }
    input{
        width: 200px;
        height: 30px;
        outline: none;
        border: none;
        border: 1px solid grey;
        box-sizing: border-box;
    }
    .item{
        position: relative;
        margin-bottom: 15px;
        padding-bottom: 20px;
        width: 300px;
        text-align: right;
    }
    .error{
        position: absolute;
        color: red;
        width: 200px;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
    }
    .item [type=submit]{
        border: none;
        background-color:blue;
        color: white;
        border: 1px solid aquamarine;
    }
    .emitcode{
        position: absolute;
        right: -60px;
        top: 2px;
        display: inline-block;
        width: 50px;
        line-height: 20px;
        text-align: center;
    }
</style>